
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-rili"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.icon-rili</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daochu"></i>
                    <div class="name">导出</div>
                    <div class="fontclass">.icon-daochu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti8"></i>
                    <div class="name">左右键-3</div>
                    <div class="fontclass">.icon-weibiaoti8</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontxinzeng"></i>
                    <div class="name">新增</div>
                    <div class="fontclass">.icon-iconfontxinzeng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-juxing2"></i>
                    <div class="name">关系表</div>
                    <div class="fontclass">.icon-juxing2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bad"></i>
                    <div class="name">bad</div>
                    <div class="fontclass">.icon-bad</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-good"></i>
                    <div class="name">good</div>
                    <div class="fontclass">.icon-good</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paixu"></i>
                    <div class="name">排序</div>
                    <div class="fontclass">.icon-paixu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-authority-management"></i>
                    <div class="name">权限</div>
                    <div class="fontclass">.icon-authority-management</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaoji"></i>
                    <div class="name">标记</div>
                    <div class="fontclass">.icon-biaoji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo1"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-sousuo1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongzhi"></i>
                    <div class="name">通知</div>
                    <div class="fontclass">.icon-tongzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zixunguanlizixunfuwuguanli"></i>
                    <div class="name">咨询管理 咨询服务 管理</div>
                    <div class="fontclass">.icon-zixunguanlizixunfuwuguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tishi"></i>
                    <div class="name">提示</div>
                    <div class="fontclass">.icon-tishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuisongxiaoxi"></i>
                    <div class="name">推送消息</div>
                    <div class="fontclass">.icon-tuisongxiaoxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bitian"></i>
                    <div class="name">必填</div>
                    <div class="fontclass">.icon-bitian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-1111108"></i>
                    <div class="name">消息推送</div>
                    <div class="fontclass">.icon-1111108</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-authority"></i>
                    <div class="name">权限代理-13</div>
                    <div class="fontclass">.icon-authority</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shezhi"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-shezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinchengyuanshenqing"></i>
                    <div class="name">新成员申请</div>
                    <div class="fontclass">.icon-xinchengyuanshenqing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gonggao"></i>
                    <div class="name">公告</div>
                    <div class="fontclass">.icon-gonggao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-role-management"></i>
                    <div class="name">角色管理</div>
                    <div class="fontclass">.icon-role-management</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhanghaoguanli"></i>
                    <div class="name">账号管理</div>
                    <div class="fontclass">.icon-zhanghaoguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-clock"></i>
                    <div class="name">clock</div>
                    <div class="fontclass">.icon-clock</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-menu"></i>
                    <div class="name">menu</div>
                    <div class="fontclass">.icon-menu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti81"></i>
                    <div class="name">左右键-3</div>
                    <div class="fontclass">.icon-weibiaoti81</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanxi"></i>
                    <div class="name">关系</div>
                    <div class="fontclass">.icon-guanxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiankong"></i>
                    <div class="name">监控</div>
                    <div class="fontclass">.icon-jiankong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuoyoujiantou-copy-copy"></i>
                    <div class="name">左右箭头</div>
                    <div class="fontclass">.icon-zuoyoujiantou-copy-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-EPCzuodaohangtubiao-"></i>
                    <div class="name">工单管理</div>
                    <div class="fontclass">.icon-EPCzuodaohangtubiao-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paixu1"></i>
                    <div class="name">排序</div>
                    <div class="fontclass">.icon-paixu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dayu"></i>
                    <div class="name">大雨</div>
                    <div class="fontclass">.icon-dayu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duoyun"></i>
                    <div class="name">多云</div>
                    <div class="fontclass">.icon-duoyun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qingtian"></i>
                    <div class="name">晴天</div>
                    <div class="fontclass">.icon-qingtian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duoyunzhuanyin"></i>
                    <div class="name">多云转阴</div>
                    <div class="fontclass">.icon-duoyunzhuanyin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoyu"></i>
                    <div class="name">小雨</div>
                    <div class="fontclass">.icon-xiaoyu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhongyu"></i>
                    <div class="name">中雨</div>
                    <div class="fontclass">.icon-zhongyu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baoyu"></i>
                    <div class="name">暴雨</div>
                    <div class="fontclass">.icon-baoyu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wu"></i>
                    <div class="name">雾</div>
                    <div class="fontclass">.icon-wu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-leizhenyu"></i>
                    <div class="name">雷阵雨</div>
                    <div class="fontclass">.icon-leizhenyu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wumai"></i>
                    <div class="name">雾霾</div>
                    <div class="fontclass">.icon-wumai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxue"></i>
                    <div class="name">小雪</div>
                    <div class="fontclass">.icon-xiaoxue</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baoxue"></i>
                    <div class="name">暴雪</div>
                    <div class="fontclass">.icon-baoxue</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bingbao"></i>
                    <div class="name">冰雹</div>
                    <div class="fontclass">.icon-bingbao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daxue"></i>
                    <div class="name">大雪</div>
                    <div class="fontclass">.icon-daxue</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-leizhenxue"></i>
                    <div class="name">雷阵雪</div>
                    <div class="fontclass">.icon-leizhenxue</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yujiaxue"></i>
                    <div class="name">雨夹雪</div>
                    <div class="fontclass">.icon-yujiaxue</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhongxue"></i>
                    <div class="name">中雪</div>
                    <div class="fontclass">.icon-zhongxue</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-feng"></i>
                    <div class="name">风</div>
                    <div class="fontclass">.icon-feng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shachen"></i>
                    <div class="name">沙尘</div>
                    <div class="fontclass">.icon-shachen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shachengbao"></i>
                    <div class="name">沙尘暴</div>
                    <div class="fontclass">.icon-shachengbao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-taifeng"></i>
                    <div class="name">台风</div>
                    <div class="fontclass">.icon-taifeng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chakan"></i>
                    <div class="name">查看</div>
                    <div class="fontclass">.icon-chakan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangxiasanjiaoxing"></i>
                    <div class="name">上下三角形</div>
                    <div class="fontclass">.icon-shangxiasanjiaoxing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinzeng"></i>
                    <div class="name">新增</div>
                    <div class="fontclass">.icon-xinzeng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-changjianwentiguanli"></i>
                    <div class="name">常见问题管理</div>
                    <div class="fontclass">.icon-changjianwentiguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chuyidong"></i>
                    <div class="name">删除／数字面板编辑态</div>
                    <div class="fontclass">.icon-chuyidong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bianji"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-bianji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhanghaoguanli1"></i>
                    <div class="name">账号管理</div>
                    <div class="fontclass">.icon-zhanghaoguanli1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chakan1"></i>
                    <div class="name">查看</div>
                    <div class="fontclass">.icon-chakan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxituisong"></i>
                    <div class="name">消息推送</div>
                    <div class="fontclass">.icon-xiaoxituisong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchu"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangqing"></i>
                    <div class="name">详情</div>
                    <div class="fontclass">.icon-xiangqing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yujing"></i>
                    <div class="name">预警</div>
                    <div class="fontclass">.icon-yujing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yijiantousu"></i>
                    <div class="name">意见</div>
                    <div class="fontclass">.icon-yijiantousu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianzhanguanli"></i>
                    <div class="name">电站管理</div>
                    <div class="fontclass">.icon-dianzhanguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuoyoujiantou"></i>
                    <div class="name">左右箭头</div>
                    <div class="fontclass">.icon-zuoyoujiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xing1"></i>
                    <div class="name">星</div>
                    <div class="fontclass">.icon-xing1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xing2"></i>
                    <div class="name">星</div>
                    <div class="fontclass">.icon-xing2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanlizixun"></i>
                    <div class="name">管理咨询</div>
                    <div class="fontclass">.icon-guanlizixun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-manyidutiaocha"></i>
                    <div class="name">满意度调查</div>
                    <div class="fontclass">.icon-manyidutiaocha</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
